<template>
  <el-container>
    <el-header>学籍登记</el-header>
    <el-form ref="form" :model="form" label-width="80px">
      <!-- <el-form-item label="学号">
        <el-input v-model="form.sno"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="form.sname"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-input v-model="form.ssex"></el-input>
      </el-form-item>

      <el-form-item label="年龄">
        <el-input v-model="form.sage"></el-input>
      </el-form-item>

      <el-form-item label="学制">
        <el-input v-model="form.ses"></el-input>
      </el-form-item>

      <el-form-item label="地区">
        <el-input v-model="form.slocation"></el-input>
      </el-form-item>

      <el-form-item label="政治面貌">
        <el-input v-model="form.spo"></el-input>
      </el-form-item>

      <el-form-item label="民族">
        <el-input v-model="form.snation"></el-input>
      </el-form-item>

      <el-form-item label="奖惩记录">
        <el-input v-model="form.srp"></el-input>
      </el-form-item>

      <el-form-item label="休复转退标记">
        <el-input v-model="form.sstm"></el-input>
      </el-form-item>

      <el-form-item label="所在专业">
        <el-input v-model="form.smajor"></el-input>
      </el-form-item>

      <el-form-item label="年级">
        <el-input v-model="form.syear"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">注册</el-button>
      </el-form-item> -->

      <el-table :data="UserList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="学号" prop="sno"></el-table-column>
        <el-table-column label="姓名" prop="sname"></el-table-column>
        <el-table-column label="性别" prop="ssex"></el-table-column>
        <el-table-column label="学制" prop="ses"></el-table-column>
        <el-table-column label="地区" prop="slocation"></el-table-column>
        <el-table-column label="年龄" prop="sage"></el-table-column>
        <el-table-column label="政治面貌" prop="spo"></el-table-column>
        <el-table-column label="民族" prop="snation"></el-table-column>
        <el-table-column label="奖惩记录" prop="srp"></el-table-column>
        <el-table-column label="休复转退标记" prop="sstm"></el-table-column>
        <el-table-column label="所在专业" prop="smajor"></el-table-column>
        <el-table-column label="年级" prop="syear"></el-table-column>
      </el-table>
    </el-form>
  </el-container>
</template>

<script>
export default {
  created() {
    this.getUserList();
  },
  data() {
    return {
      form: {},
      query: {
        sno: "1",
        sname: "",
        ssex: "",
        sses: "",
        slocation: "",
        sage: "",
        spo: "",
        snation: "",
        srp: "",
        sstm: "",
        smajor: "",
        syear: ""
      },
      UserList: [],
      total: 0
    }
  },
  methods: {

    //接口调用后端数据
    async getUserList() {
      const _this = this;
      this.$axios.post("http://localhost:8081/abcd", this.query).then(res => {
        //const token = res.headers["authorization"];
        console.log(res.data);
        this.UserList = res.data;
        //this.total = res.number;
      });
    }
  }
}

</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  font-size: 40px;
}

.el-form-item {
  font-family: 宋体;
  font-weight: bold;
}
</style>